<template>
    <page-box
        class="page"
        :class="{
            opera: _isOperationPage,
            town: _isTownPage,
            townAdmin: _isTownAdminPage,
            regionalAdmin: _isRegionalAdminPage
        }"
    >
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName($route.path)"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                        >{{ item.meta.title }}</ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{
                        item.meta.title
                    }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
            <page-search>
                <page-search-column class="tab-column custom-tabs-box">
                    <el-tabs
                        v-if="!_isOperationPage && !_isRegionalAdminPage"
                        class="theme-gray"
                        v-model="typeValue"
                        @tab-click="handleTabClick"
                    >
                        <el-tab-pane
                            v-for="item in typeList"
                            :label="item.label"
                            :key="item.value"
                            :name="item.value"
                        >
                            <div slot="label">{{ item.label }}</div>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="btn-area" v-if="_isTownPage">
                        <!--                        <el-button type="primary" @click="handleJump('TownReceivedList')">我下发的任务</el-button>-->
                        <el-button
                            type="primary"
                            @click="handleJump('TownFillInForm')"
                            >我填报的数据</el-button
                        >
                    </div>
                </page-search-column>
                <page-search-column class="fixed-column">
                    <page-search-item>
                        <el-select
                            v-if="typeValue === 'all'"
                            v-model="typeId"
                            class="pbb__search-input"
                            @change="handleTabClick"
                            placeholder="请选择分类"
                            clearable
                        >
                            <el-option
                                v-for="item in commonTypeList"
                                :key="item.id"
                                :value="item.id"
                                :label="item.name"
                            >
                            </el-option>
                        </el-select>
                    </page-search-item>
                    <page-search-item>
                        <el-input
                            v-model="searchKey"
                            class="pbb__search-input"
                            prefix-icon="el-icon-search"
                            placeholder="请输入关键词搜索表单"
                            clearable
                        ></el-input>
                    </page-search-item>
                    <page-search-item v-if="_isTownAdminPageCustom">
                        <el-select
                            v-model="searchDepartment"
                            class="pbb__search-input"
                            placeholder="请选择部门"
                            clearable
                        >
                            <el-option
                                v-for="(item, index) in departmentList"
                                :key="index"
                                :value="item.id"
                                :label="item.name"
                            ></el-option>
                        </el-select>
                    </page-search-item>
                    <page-search-item>
                        <el-button
                            type="primary"
                            class="pbb__search-btn"
                            @click="handleSearch()"
                        >
                            查询
                        </el-button>
                    </page-search-item>
                </page-search-column>
            </page-search>
        </template>
        <div class="table-list">
            <ul>
                <li
                    class="first"
                    v-if="
                        _isOperationPage ||
                            _isRegionalAdminPage ||
                            typeValue === 'custom'
                    "
                >
                    <p @click="add({})">
                        <i class="el-icon-plus"></i
                        ><span>{{
                            _isOperationPage
                                ? "添加公共表单"
                                : _isRegionalAdminPage
                                ? "添加乡镇表单"
                                : "添加自定义表单"
                        }}</span>
                    </p>
                </li>
                <template v-for="(item, index) in tableData">
                    <li :key="index">
                        <div class="top-content" @click="query(item)">
                            <div
                                v-if="
                                    item.source.remind &&
                                        item.status &&
                                        tipStatus === '6'
                                "
                                class="status-tips"
                                :class="{
                                    active: item.source.remind && item.status
                                }"
                            >
                                已提醒
                            </div>
                            <div
                                class="status-tips"
                                :class="{ finish: item.status }"
                            >
                                {{ item.status ? "已发布" : "草稿" }}
                            </div>
                            <p class="form-name">{{ item.name || "-" }}</p>
                            <div class="justify-c">
                                <span class="time">{{
                                    item.createByTime
                                        ? item.createByTime.substring(0, 10)
                                        : "-"
                                }}</span>
                                <p
                                    class="custom-info p1"
                                    v-if="
                                        _isOperationPage || _isRegionalAdminPage
                                    "
                                    :title="item.createByUser || ''"
                                >
                                    {{ item.createByUser || "" }}
                                </p>
                                <p
                                    class="custom-info p1"
                                    v-else-if="
                                        typeValue === 'department' &&
                                            item.transferDepart
                                    "
                                    :title="
                                        (item.createByUser || '') + '共享表单'
                                    "
                                >
                                    {{ (item.createByUser || "") + "共享表单" }}
                                </p>
                                <p
                                    class="custom-info p1"
                                    v-else-if="
                                        _isTownAdminPageAll ||
                                            (_isTownAdminPage &&
                                                typeValue === 'regional')
                                    "
                                >
                                    <template v-if="item.processId">
                                        <i class="el-icon-link"></i>已关联
                                    </template>
                                    <template v-else>
                                        <i
                                            class="el-icon-link el-icon-not-link"
                                        ></i
                                        >未关联
                                    </template>
                                </p>
                                <p
                                    class="custom-info p1"
                                    v-else-if="_isTownAdminPageCustom"
                                    :title="
                                        item.transferDepart
                                            ? item.department +
                                              '/' +
                                              item.createUser +
                                              '共享'
                                            : item.department || ''
                                    "
                                >
                                    {{
                                        item.transferDepart
                                            ? item.department +
                                              "/" +
                                              item.createUser +
                                              "共享"
                                            : item.department || ""
                                    }}
                                </p>
                                <p class="custom-info" v-else></p>
                            </div>
                        </div>
                        <div class="btn-box">
                            <div class="out-btn">
                                <div
                                    class="btn-item"
                                    v-if="
                                        getAuthBtn(
                                            item.status && item.processId,
                                            'sendTask'
                                        )
                                    "
                                    @click.stop="edit(item, 'send')"
                                >
                                    <span>
                                        <icon-svg
                                            name="icon-form-task-normal"
                                        ></icon-svg>
                                        <icon-svg
                                            name="icon-form-task-hover"
                                        ></icon-svg>
                                    </span>
                                    <span class="btn-content-tips"
                                        >任务下发</span
                                    >
                                </div>
                                <div
                                    class="btn-item"
                                    @click.stop="copyForm(item)"
                                >
                                    <span>
                                        <icon-svg
                                            name="icon-form-copy-normal"
                                        ></icon-svg>
                                        <icon-svg
                                            name="icon-form-copy-hover"
                                        ></icon-svg>
                                    </span>
                                    <span class="btn-content-tips">复制</span>
                                </div>
                                <div
                                    class="btn-item"
                                    v-if="
                                        getAuthBtn(
                                            item.status && item.processId,
                                            'fillIn'
                                        )
                                    "
                                    @click.stop="toFillIn(item)"
                                >
                                    <span>
                                        <icon-svg
                                            name="icon-form-fill-normal"
                                        ></icon-svg>
                                        <icon-svg
                                            name="icon-form-fill-hover"
                                        ></icon-svg>
                                    </span>
                                    <span class="btn-content-tips"
                                        >自主填报</span
                                    >
                                </div>
                                <div
                                    class="btn-item"
                                    v-if="
                                        getAuthBtn(!item.processId, 'contact')
                                    "
                                    @click.stop="showBindFlow(item)"
                                >
                                    <span>
                                        <icon-svg
                                            name="icon-form-contact-normal"
                                        ></icon-svg>
                                        <icon-svg
                                            name="icon-form-contact-hover"
                                        ></icon-svg>
                                    </span>
                                    <span class="btn-content-tips"
                                        >关联流程</span
                                    >
                                </div>
                                <div
                                    class="btn-item"
                                    v-if="getAuthBtn(item.status, 'edit')"
                                    @click.stop="edit(item)"
                                >
                                    <span>
                                        <icon-svg
                                            name="icon-form-edit-normal"
                                        ></icon-svg>
                                        <icon-svg
                                            name="icon-form-edit-hover"
                                        ></icon-svg>
                                    </span>
                                    <span class="btn-content-tips">编辑</span>
                                </div>
                                <div
                                    class="btn-item"
                                    v-if="getAuthBtn(item.status, 'history')"
                                    @click.stop="toHistory(item)"
                                >
                                    <span>
                                        <icon-svg
                                            name="icon-form-history-normal"
                                        ></icon-svg>
                                        <icon-svg
                                            name="icon-form-history-hover"
                                        ></icon-svg>
                                    </span>
                                    <span class="btn-content-tips"
                                        >历史任务</span
                                    >
                                </div>
                                <div
                                    class="btn-item"
                                    v-if="getAuthBtn(item.status, 'delete')"
                                    @click.stop="remove(item)"
                                >
                                    <span>
                                        <icon-svg
                                            name="icon-form-delete-normal"
                                        ></icon-svg>
                                        <icon-svg
                                            name="icon-form-delete-hover"
                                        ></icon-svg>
                                    </span>
                                    <span class="btn-content-tips">删除</span>
                                </div>
                                <div
                                    class="btn-item"
                                    v-if="getAuthBtn(item.status, 'setTips')"
                                    @click.stop="handleSetboxShow(item)"
                                >
                                    <span>
                                        <icon-svg
                                            name="icon-form-settips"
                                        ></icon-svg>
                                        <icon-svg
                                            name="icon-form-settips-hover"
                                        ></icon-svg>
                                    </span>
                                    <span class="btn-content-tips"
                                        >设置提醒</span
                                    >
                                </div>
                            </div>
                            <el-dropdown trigger="click">
                                <span class="el-dropdown-link">
                                    <i
                                        class="el-icon-more more-btn"
                                        v-if="hasBtn(item.status)"
                                    ></i>
                                </span>
                                <el-dropdown-menu
                                    slot="dropdown"
                                    class="form-btn-dropdown"
                                >
                                    <el-dropdown-item
                                        v-if="
                                            getAuthBtn(
                                                item.status && item.processId,
                                                'sendTask',
                                                true
                                            )
                                        "
                                    >
                                        <div @click.stop="edit(item, 'send')">
                                            <icon-svg
                                                name="icon-form-task-normal"
                                                class="normal"
                                            ></icon-svg>
                                            <icon-svg
                                                name="icon-form-task-hover"
                                                class="hover"
                                            ></icon-svg>
                                            <span class="btn">任务下发</span>
                                        </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        v-if="
                                            getAuthBtn(
                                                item.status && item.processId,
                                                'fillIn',
                                                true
                                            )
                                        "
                                    >
                                        <div @click.stop="toFillIn(item)">
                                            <icon-svg
                                                name="icon-form-fill-normal"
                                                class="normal"
                                            ></icon-svg>
                                            <icon-svg
                                                name="icon-form-fill-hover"
                                                class="hover"
                                            ></icon-svg>
                                            <span class="btn">自主填报</span>
                                        </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        v-if="
                                            getAuthBtn(
                                                item.status && item.processId,
                                                'import',
                                                true
                                            )
                                        "
                                    >
                                        <div @click.stop="importRow(item)">
                                            <icon-svg
                                                name="icon-form-import-normal"
                                                class="normal"
                                            ></icon-svg>
                                            <icon-svg
                                                name="icon-form-import-hover"
                                                class="hover"
                                            ></icon-svg>
                                            <span class="btn">导入数据</span>
                                        </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        v-if="
                                            getAuthBtn(
                                                !item.processId,
                                                'contact',
                                                true
                                            )
                                        "
                                    >
                                        <div @click.stop="showBindFlow(item)">
                                            <icon-svg
                                                name="icon-form-contact-normal"
                                                class="normal"
                                            ></icon-svg>
                                            <icon-svg
                                                name="icon-form-contact-hover"
                                                class="hover"
                                            ></icon-svg>
                                            <span class="btn">关联流程</span>
                                        </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        v-if="
                                            getAuthBtn(
                                                item.status && item.processId,
                                                'edit',
                                                true
                                            )
                                        "
                                    >
                                        <div @click.stop="edit(item)">
                                            <icon-svg
                                                name="icon-form-edit-normal"
                                                class="normal"
                                            ></icon-svg>
                                            <icon-svg
                                                name="icon-form-edit-hover"
                                                class="hover"
                                            ></icon-svg>
                                            <span class="btn">编辑</span>
                                        </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        v-if="
                                            getAuthBtn(
                                                item.status,
                                                'history',
                                                true
                                            )
                                        "
                                    >
                                        <div @click.stop="toHistory(item)">
                                            <icon-svg
                                                name="icon-form-history-normal"
                                                class="normal"
                                            ></icon-svg>
                                            <icon-svg
                                                name="icon-form-history-hover"
                                                class="hover"
                                            ></icon-svg>
                                            <span class="btn">历史任务</span>
                                        </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        v-if="
                                            getAuthBtn(
                                                item.status,
                                                'delete',
                                                true
                                            )
                                        "
                                    >
                                        <div @click.stop="remove(item)">
                                            <icon-svg
                                                name="icon-form-delete-normal"
                                                class="normal"
                                            ></icon-svg>
                                            <icon-svg
                                                name="icon-form-delete-hover"
                                                class="hover"
                                            ></icon-svg>
                                            <span class="btn">删除</span>
                                        </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        v-if="
                                            getAuthBtn(
                                                item.status,
                                                'share',
                                                true
                                            )
                                        "
                                    >
                                        <div @click.stop="share(item)">
                                            <icon-svg
                                                name="icon-form-share-normal"
                                                class="normal"
                                            ></icon-svg>
                                            <icon-svg
                                                name="icon-form-share-hover"
                                                class="hover"
                                            ></icon-svg>
                                            <span class="btn">共享至部门</span>
                                        </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        v-if="
                                            item.transferDepart &&
                                                item.transferSelf &&
                                                typeValue === 'department'
                                        "
                                    >
                                        <div @click.stop="cancelShare(item)">
                                            <icon-svg
                                                name="icon-form-cancel-share-normal"
                                                class="normal"
                                            ></icon-svg>
                                            <icon-svg
                                                name="icon-form-cancel-share-hover"
                                                class="hover"
                                            ></icon-svg>
                                            <span class="btn">取消共享</span>
                                        </div>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </li>
                </template>
            </ul>
        </div>
        <ask-empty-text style="height: 200px;" v-if="tableData.length === 0">
            暂无数据
        </ask-empty-text>
        <el-dialog
            title="关联流程"
            :close-on-click-modal="false"
            :visible.sync="showBindFlowDialog"
            width="1000px"
        >
            <select-flow
                v-if="showBindFlowDialog"
                ref="SelectFlow"
                :processId="currentForm.processId"
            ></select-flow>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeBindFlow">取 消</el-button>
                <el-button type="primary" @click="saveBindFlow"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
        <template v-slot:footer v-if="pageCount > 0">
            <pagination
                :total="pageCount"
                :pageSizes="[19, 34, 49, 94]"
                :page.sync="currentPage"
                :limit.sync="pageSize"
                @pagination="initData"
            />
        </template>
        <el-dialog
            title="导入数据"
            :close-on-click-modal="false"
            :visible.sync="showImportDialog"
            width="24%"
        >
            <div class="import-dialog">
                <div class="step-import">
                    <div class="step1">
                        <el-link type="primary" @click.stop="downTemplate"
                            >下载模板</el-link
                        >
                        <div class="word">
                            请先下载模板，根据模板填写后导入。<br />部分复杂表格格式暂不支持导入，请完成导入后进入详情页面手动添加。
                        </div>
                    </div>
                    <upLoad-normal
                        :accept="'.xlsx'"
                        :isSingle="true"
                        @httpRequest="httpRequest"
                    >
                        <el-link type="primary">导入excel</el-link>
                    </upLoad-normal>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeImport">关闭</el-button>
            </div>
        </el-dialog>
        <set-tips
            :show="setboxshow"
            :businessId="businessId"
            :typeName="typeName"
            :businessName="businessName"
            :businessType="1"
            @handleCallBack="handleCallBack"
            @handleClose="setboxshow = false"
        ></set-tips>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import { State } from "vuex-class";
import TableMixin from "../../table.mixin";
import TreeCascader from "../../../components/tree-cascader/index.vue";
import SelectFlow from "@/views/module-manage/src/components/select-flow/index.vue";
import UpLoadNormal from "@/components/upload-normal/index.vue";
import SetTips from "@/components/set-tips/index.vue";
import { downLoadBase64File } from "@/utils";

@Component({
    name: "ModuleManageHome",
    components: {
        TreeCascader,
        SelectFlow,
        UpLoadNormal,
        SetTips
    }
})
export default class ModuleManageHome extends Mixins(TableMixin) {
    @State(state => state.authArea) authArea: any;
    // 当前用户所处层级菜单

    get tipStatus() {
        return this.authArea ? this.authArea.orgCategorySourceId : "";
    }

    get userLevel() {
        return this.$getUserLevel(
            this.authArea ? this.authArea.orgCategoryId || "" : ""
        );
        // return this.$getUserLevel("6");
    }

    get _isOperation() {
        return ["ADMIN", "OPERATION_ADMIN", "OPERATION"].includes(
            this.userLevel.name
        );
    }

    get _isOperationPage() {
        return this.$route.name === "OperationModuleManageList";
    }

    get _isRegionalAdminPage() {
        return this.$route.name === "RegionalAdminModuleManageList";
    }

    get _isTownAdminPage() {
        return this.$route.name === "TownAdminModuleManageList";
    }

    get _isTownPage() {
        return this.$route.name === "TownModuleManageHome";
    }

    get _isTownAdminPageAll() {
        return this._isTownAdminPage && this.typeValue === "all";
    }

    get _isTownAdminPageCustom() {
        return this._isTownAdminPage && this.typeValue === "custom";
    }

    searchKey = "";
    searchDepartment = "";
    typeId = "";
    typeValue = "custom";
    showBindFlowDialog = false;
    showImportDialog = false;
    currentForm: any = {};
    commonTypeList: any[] = [];
    setboxshow = false;
    businessId = "";
    businessName = "";
    typeName = "表单采集";

    get typeList() {
        let res: any[] = [];
        if (this._isOperationPage) {
            this.typeValue = "all";
            res = [
                {
                    label: "平台表单",
                    value: "all",
                    status: "1"
                }
            ];
        } else if (this._isRegionalAdminPage) {
            this.typeValue = "regional";
            res = [
                {
                    label: "区县表单",
                    value: "regional",
                    status: "4"
                }
            ];
        } else if (this._isTownAdminPage) {
            res = [
                {
                    label: "各科室表单模板",
                    value: "custom",
                    status: "2"
                },
                {
                    label: "区县表单模板",
                    value: "regional",
                    status: "4"
                },
                {
                    label: "平台表单模板",
                    value: "all",
                    status: "1"
                }
            ];
        } else {
            res = [
                {
                    label: "我的表单",
                    value: "custom",
                    status: "3"
                },
                {
                    label: "科室表单",
                    value: "department",
                    status: "2"
                },
                {
                    label: "区县表单",
                    value: "regional",
                    status: "4"
                },
                {
                    label: "平台表单",
                    value: "all",
                    status: "1"
                }
            ];
        }
        return res;
    }

    cityCode = "";
    // 表格数据
    // tableData = [];
    // 批量操作数据集合
    batchList: any[] = [];
    canBatch: any = {
        // 是否可以批量关联部门
        relationDepartment: false,
        // 是否可以批量删除
        remove: false
    };

    // 当前操作表单id
    currentFormId: any = "";
    currentFormName: any = "";
    currentFormDesc: any = "";

    get tableColumn() {
        const res: any[] = [
            { label: "模板名称", prop: "name", width: "300" },
            { label: "模板描述", prop: "desc", width: "300" },
            { label: "创建时间", prop: "createByTime" },
            { label: "创建人", prop: "createByUser" },
            { label: "模板状态", prop: "status" }
        ];
        if (this._isTownAdminPage) {
            res.splice(1, 0, { label: "部门", prop: "department" });
        }
        return res;
    }

    departmentValue: any[] = [];
    departmentList: any[] = [];

    created() {
        this.typeValue = this._isOperationPage
            ? "all"
            : this._isRegionalAdminPage
                ? "regional"
                : "custom";
        this.getType();
    }

    activated() {
        this.initSearchData();
        this.initData();
    }

    handleJump(routeName: string) {
        this.$router.push({
            name: routeName,
            params: {
                tabs: "3"
            }
        });
    }

    async getType() {
        const res = await this.$server["business/config/tree"]({
            data: {}
        });
        if (res.data.code === 200) {
            this.commonTypeList = res.data.data[0].children;
        }
    }

    handleSetboxShow(item: any) {
        this.businessId = item.id;
        this.businessName = item.name;
        this.setboxshow = true;
    }

    handleCallBack() {
        this.setboxshow = false;
        this.initData();
    }

    handleTagChange() {
        this.initData();
    }

    handleTabClick() {
        this.searchKey = "";
        this.initSearchData();
        this.initData();
    }

    checkBtnAuth(item: any, ...status: any[]) {
        const { status: reviewStatus }: any = item;
        return status.includes(reviewStatus.name);
    }

    handleBatchClick(command: any) {
        if (command === "remove") {
            this.remove({}, "batch");
        }
    }

    handleRelationDepartment(vm: any, value: any, row: any) {
        this.updateRelationDepartment(vm, value, [row.id], "single");
    }

    async handleBatchRelationDepartment(vm: any) {
        await this.updateRelationDepartment(
            vm,
            this.departmentValue,
            this.batchList.map((cur: any) => cur.id),
            "batch"
        );
        this.departmentValue = [];
    }

    async updateRelationDepartment(
        vm: any,
        value: any,
        ids: any[],
        type: string
    ) {
        console.log(type);
        vm.loader(true);
        const response = await this.$server[
            "moduleManage/norm-list/updateDept"
        ]({
            data: {
                deptIds: value,
                dimensionalityId: ids
            }
        });
        if (this.responseHasError(response)) {
            vm.loader(false);
            return;
        }
        this.$message({
            message: "部门已修改",
            type: "success",
            duration: 1500
        });
        vm.loader(false);
        vm.close();
        this.initData();
    }

    getConfirmInfo(item: any, type: string, handleModel = "single") {
        const confirmInfo: any = {
            msg: "",
            content: "",
            ids: []
        };
        if (type === "remove") {
            confirmInfo.content = "是否确认删除表单?";
            confirmInfo.msg = "删除成功！";
        }
        if (type === "release") {
            confirmInfo.content = "是否确认发布表单?";
            confirmInfo.msg = "已发布！";
        }
        let ids = [];
        if (handleModel === "batch") {
            confirmInfo.content =
                "共计" +
                this.batchList.length +
                "条数据，" +
                confirmInfo.content;
            ids = this.batchList.map(cur => cur.id);
        } else {
            ids = [item.id];
        }
        confirmInfo.ids = ids;
        return confirmInfo;
    }

    // 获取部门列表
    async initSearchData() {
        const departmentResponse = await this.$server[
            "moduleManage/department"
        ]({
            data: {
                governmentId: this.authArea.governmentId
            }
        });
        if (this.responseHasError(departmentResponse)) {
            return;
        }
        this.departmentList = departmentResponse.data.data.length
            ? departmentResponse.data.data[0].children || []
            : [];
    }

    getInitParams() {
        return {
            url: "moduleManage/norm-list/list",
            data: {
                formKind: this.$key2Name({
                    type: this.typeValue,
                    list: this.typeList,
                    name: "status"
                }),
                typeId: this.typeValue === "all" ? this.typeId : "",
                name: this.searchKey || undefined,
                departmentId: this._isTownAdminPageCustom
                    ? this.searchDepartment || undefined
                    : undefined
            }
        };
    }

    buildTableData(list: any) {
        let res: any = [];
        if (list.length === 0) {
            return res;
        }
        res = list.map((cur: any) => {
            return {
                id: cur.id || "",
                name: cur.name || "",
                desc: cur.description || "",
                department: cur.departmentName || "",
                departmentValue: this.formatTextToArray(
                    cur.departmentIds || ""
                ),
                createByTime: cur.createTime || "",
                createByUser: cur.createUser || "",
                processId: cur.processId || "",
                status: cur.status,
                transferDepart: cur.transferDepart,
                transferSelf: cur.transferSelf,
                createUser: cur.createUser,
                source: cur
            };
        });
        return res;
    }

    handleSearch() {
        this.currentPage = 1;
        this.initData();
    }

    add(item: any) {
        this.$router.push({
            name:
                (this._isOperationPage
                    ? "Operation"
                    : this._isRegionalAdminPage
                        ? "RegionalAdmin"
                        : this._isTownPage
                            ? "Town"
                            : "TownAdmin") + "ModuleManageForm",
            query: {
                moduleId: item.id || ""
            }
        });
    }

    remove(item: any, handleModel?: string) {
        this.triggerConfirm({
            item: item,
            type: "remove",
            handleModel: handleModel || "single",
            sure: async(confirmInfo: any) => {
                const response = await this.$server["moduleManage/form/delete"](
                    {
                        params: {
                            id: item.id
                        }
                    }
                );
                if (this.responseHasError(response)) {
                    return;
                }
                if (response.data.code !== 200) {
                    throw response.data;
                }
                this.$message({
                    message: confirmInfo.msg,
                    type: "success",
                    duration: 1500
                });
                this.initData();
            }
        });
    }

    query(item: any) {
        this.$router.push({
            name:
                (this._isOperationPage
                    ? "Operation"
                    : this._isRegionalAdminPage
                        ? "RegionalAdmin"
                        : this._isTownPage
                            ? "Town"
                            : "TownAdmin") + "ModuleManageForm",
            params: {
                type: this.typeValue
            },
            query: {
                id: item.id,
                processId: item.processId,
                isDetail: "1",
                type: this.typeValue,
                formStatus: item.status
            }
        });
    }

    // 编辑
    edit(item: any, type?: any) {
        this.$router.push({
            name:
                (this._isOperationPage
                    ? "Operation"
                    : this._isRegionalAdminPage
                        ? "RegionalAdmin"
                        : this._isTownPage
                            ? "Town"
                            : "TownAdmin") + "ModuleManageForm",
            query: {
                id: item.id,
                processId: item.processId,
                isSend: type
            }
        });
    }

    // 历史任务
    toHistory(item: any) {
        this.$router.push({
            name: "TownReceivedList",
            params: {
                name: item.name,
                formId: item.id,
                tabs: "3"
            }
        });
    }

    // 复制表单
    copyForm(item: any) {
        this.$router.push({
            name:
                (this._isOperationPage
                    ? "Operation"
                    : this._isRegionalAdminPage
                        ? "RegionalAdmin"
                        : this._isTownPage
                            ? "Town"
                            : "TownAdmin") + "ModuleManageForm",
            query: {
                id: item.id,
                isCopy: "copy"
            }
        });
    }

    release(item: any) {
        this.triggerConfirm({
            item: item,
            type: "release",
            handleModel: "single",
            sure: async(confirmInfo: any) => {
                // const ids = item.id ? [item.id] : [];
                const response = await this.$server["moduleManage/delete"]({
                    params: {
                        id: confirmInfo.ids || []
                    }
                });
                if (this.responseHasError(response)) {
                    return;
                }
                this.$message({
                    message: confirmInfo.msg,
                    type: "success",
                    duration: 1500
                });
                this.initData();
            }
        });
    }

    // 关联流程
    showBindFlow(row: any) {
        this.currentForm = row;
        this.showBindFlowDialog = true;
    }

    closeBindFlow() {
        this.showBindFlowDialog = false;
    }

    // 保存关联流程
    saveBindFlow() {
        (this.$refs.SelectFlow as any).sure((val: any) => {
            this.$server["process/processBind"]({
                data: {
                    formId: this.currentForm.id,
                    processId: val
                }
            })
                .then((res: any) => {
                    if (res.data.code === 200) {
                        this.$message.success("绑定成功");
                        this.closeBindFlow();
                        this.initData();
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch();
        });
    }

    // 填报数据
    toFillIn(row: any) {
        this.$router.push({
            name: "TownFillInFormFillIn",
            query: {
                id: row.id,
                name: row.name,
                description: row.description || row.desc
            }
        });
    }

    // 下载模板
    async downTemplate() {
        const res = await this.$server["task/download/templateForm"]({
            data: {
                formId: this.currentFormId
            }
        });
        if (res.data && res.data.code === 200) {
            downLoadBase64File(
                this.currentFormName + "-" + "填报模板.xlsx",
                res.data.data
            );
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 自定义上传文件
    async httpRequest(fileList: any[]) {
        const form = new FormData();
        form.append("formId", this.currentFormId);
        for (let i = 0; i < fileList.length; i++) {
            form.append("file", fileList[i], fileList[i].name);
        }
        const res = await this.$server["moduleManage/fillForm/import"]({
            data: form
        });
        if (res.data.code === 200) {
            const msg = await this.$store.dispatch("importNotice", {
                formId: this.currentFormId
            });
            if (msg) {
                this.$message.success(
                    "导入成功，有其他特殊控件无法导入，请前往手动填写"
                );
            } else {
                this.$message.success("导入成功");
            }
            this.closeImport();
            this.$router.push({
                name: "TownFillInFormDetail",
                query: {
                    formId: this.currentFormId,
                    name: this.currentFormName,
                    description: this.currentFormDesc
                }
            });
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 导入
    importRow(row: any) {
        this.showImportDialog = true;
        this.currentFormId = row.id;
        this.currentFormName = row.name;
        this.currentFormDesc = row.description;
    }

    closeImport() {
        this.showImportDialog = false;
    }

    // 共享
    share(row: any) {
        this.$confirm(
            "将表单共享至部门，同部门人员可在[部门表单]中查看并使用此表单进行下发或填报",
            "确认共享至部门？"
        ).then(async() => {
            const res = await this.$server["moduleManage/norm-list/share"]({
                data: {
                    formId: row.id
                }
            });
            if (res.data.code === 200) {
                this.$message.success("操作成功!");
                this.initData();
            } else {
                this.$message.error(res.data.message || "接口请求错误!");
            }
        });
    }

    // 取消共享
    cancelShare(row: any) {
        this.$confirm(
            "取消后，同部门人员将不可在[部门表单]中查看使用此表单",
            "确认取消共享表单？"
        ).then(async() => {
            const res = await this.$server[
                "moduleManage/norm-list/cancelShare"
            ]({
                data: {
                    formId: row.id
                }
            });
            if (res.data.code === 200) {
                this.$message.success("操作成功!");
                this.initData();
            } else {
                this.$message.error(res.data.message || "接口请求错误!");
            }
        });
    }

    get allAuthBtn() {
        return {
            operation: {
                all: {
                    finish: ["delete"],
                    draft: ["edit"],
                    inner: {
                        finish: [],
                        draft: ["delete"]
                    }
                }
            },
            regionalAdmin: {
                regional: {
                    finish: ["delete"],
                    draft: ["edit"],
                    inner: {
                        finish: [],
                        draft: ["delete"]
                    }
                }
            },
            townAdmin: {
                all: {
                    finish: ["contact"],
                    draft: [],
                    inner: {
                        finish: [],
                        draft: []
                    }
                },
                regional: {
                    finish: ["contact"],
                    draft: [],
                    inner: {
                        finish: [],
                        draft: []
                    }
                },
                custom: {
                    finish: ["delete", "setTips"],
                    draft: ["edit"],
                    inner: {
                        finish: [],
                        draft: ["delete"]
                    }
                }
            },
            town: {
                all: {
                    finish: ["sendTask"],
                    draft: [],
                    inner: {
                        finish: ["fillIn", "import", "history"],
                        draft: []
                    }
                },
                regional: {
                    finish: ["sendTask"],
                    draft: [],
                    inner: {
                        finish: ["fillIn", "import", "history"],
                        draft: []
                    }
                },
                department: {
                    finish: ["sendTask"],
                    draft: [],
                    inner: {
                        finish: ["fillIn", "import", "history"],
                        draft: []
                    }
                },
                custom: {
                    finish: ["sendTask"],
                    draft: ["edit"],
                    inner: {
                        finish: [
                            "fillIn",
                            "import",
                            "history",
                            "delete",
                            "share"
                        ],
                        draft: ["delete"]
                    }
                }
            }
        };
    }

    /**
     * 判断按钮是否显示
     * @param status 发布状态
     * @param btnName 按钮名称
     * @param isInner 是否在更多
     */
    getAuthBtn(status: any, btnName: any, isInner?: boolean) {
        const type = status ? "finish" : "draft";
        const pageName = this._isOperationPage
            ? "operation"
            : this._isRegionalAdminPage
                ? "regionalAdmin"
                : this._isTownAdminPage
                    ? "townAdmin"
                    : "town";
        const typeValue = this.typeValue;
        return isInner
            ? this.allAuthBtn[pageName][typeValue].inner[type].includes(btnName)
            : this.allAuthBtn[pageName][typeValue][type].includes(btnName);
    }

    hasBtn(status: any) {
        const type = status ? "finish" : "draft";
        const pageName = this._isOperationPage
            ? "operation"
            : this._isRegionalAdminPage
                ? "regionalAdmin"
                : this._isTownAdminPage
                    ? "townAdmin"
                    : "town";
        const typeValue = this.typeValue;
        return this.allAuthBtn[pageName][typeValue].inner[type].length;
    }
}
</script>
<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        background: #e5e7ea !important;
    }
}
.template-type-list {
    margin-bottom: 10px;
    p {
        margin-bottom: 0;
        display: inline-block;
        font-size: 14px;
        margin-right: 10px;
    }
}
.table-list {
    padding: 10px 24px 0;
    ul {
        @include flexLayout(flex, normal, normal);
        flex-wrap: wrap;
        li {
            width: calc(20% - 16px);
            height: 130px;
            margin-right: 20px;
            opacity: 1;
            border-radius: 2px;
            margin-bottom: 20px;
            overflow: hidden;
            background: #fff;
            &.first {
                p {
                    margin: 0;
                    font-size: 16px;
                    font-family: "PingFang SC Medium";
                    text-align: center;
                    line-height: 130px;
                    cursor: pointer;
                    color: #de2728;
                    span {
                        margin-left: 8px;
                    }
                }
            }
            &:nth-child(5n) {
                margin-right: 0;
            }
            .top-content {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 94px;
                border-bottom: 1px solid #f7f7f7;
                cursor: pointer;
                .status-tips {
                    position: absolute;
                    font-size: 12px;
                    font-family: "PingFang SC Medium";
                    line-height: 14px;
                    color: #9da1a4;
                    background: rgba(183, 183, 183, 0.1);
                    text-align: center;
                    top: 10px;
                    right: -30px;
                    width: 100px;
                    transform: rotate(28deg);
                    z-index: 20;
                    &.finish {
                        color: #2c82c9;
                        background: rgba(44, 130, 201, 0.1);
                    }
                    &.active {
                        color: #03b915;
                        background: rgba(44, 130, 201, 0.1);
                        left: -30px;
                        transform: rotate(-28deg);
                    }
                }
                .form-name {
                    margin: 25px 0 0 20px;
                    font-size: 16px;
                    line-height: 22px;
                    font-family: "PingFang SC Medium";
                    color: #000;
                    @include textEllipsis();
                }
                .justify-c {
                    font-size: 14px;
                    line-height: 14px;
                    font-family: "PingFang SC Medium";
                    color: #9da1a4;
                    padding: 7px 10px 25px 20px;
                    @include flexLayout(flex, normal, center);
                    .custom-info {
                        max-width: calc(100% - 102px);
                        margin: 0;
                        @include textEllipsis();
                        .el-icon-link {
                            font-size: 16px;
                            line-height: 22px;
                            color: #25e27d;
                        }
                        .el-icon-link.el-icon-not-link {
                            color: #9da1a4;
                        }
                        &.p1 {
                            padding-left: 6px;
                            margin-left: 6px;
                            border-left: 1px solid #9da1a4;
                        }
                    }
                    .time {
                        margin: 0;
                        .el-icon-time {
                            font-size: 16px;
                            line-height: 22px;
                            color: #2c82c9;
                        }
                    }
                }
            }
            .btn-box {
                height: 36px;
                padding-left: 20px;
                padding-right: 12px;
                @include flexLayout(flex, justify, center);
                .out-btn {
                    @include flexLayout(flex, normal, center);
                    .btn-item {
                        margin-right: 15px;
                        cursor: pointer;
                        font-size: 14px;
                        @include flexLayout(flex, normal, center);
                        .icon-svg {
                            display: none;
                            &:first-child {
                                display: inline-block;
                            }
                        }
                        .btn-content-tips {
                            font-size: 14px;
                            margin-left: 2px;
                            color: #888888;
                        }
                        &:hover {
                            color: #de2728;
                            .icon-svg {
                                display: none;
                                &:last-child {
                                    display: inline-block;
                                }
                            }
                            .btn-content-tips {
                                color: #de2728;
                            }
                        }
                    }
                }
                .more-btn {
                    transform: rotate(90deg);
                    cursor: pointer;
                }
            }
        }
    }
}
::v-deep {
    .select-flow-container {
        padding-left: 0;
        @include flexLayout(flex, center, normal);
        flex-wrap: wrap;
        & > span {
            display: block;
            width: 100%;
        }
    }
}
.el-dropdown-link {
    color: #888888;
}
.form-btn-dropdown {
    transform: translate(10px, 5px);
    padding: 0;
    background: #ffffff;
    box-shadow: 0px 3px 6px rgba(183, 183, 183, 0.24);
    border-radius: 4px;
    border: 0;
    ::v-deep {
        .el-dropdown-menu__item {
            line-height: 36px;
            font-size: 16px;
            color: #888888;
            padding: 0;
            & > div {
                padding: 0 32px 0 20px;
                @include flexLayout(flex, normal, center);
            }
            .hover {
                display: none;
                margin-right: 10px;
            }
            .normal {
                margin-right: 10px;
            }
            .btn {
                color: #888888 !important;
            }
            &:hover {
                color: #de2728;
                background: #ffd1d1;
                .hover {
                    display: inline-block;
                }
                .normal {
                    display: none;
                }
                .btn {
                    color: #de2728 !important;
                }
            }
        }
        .popper__arrow {
            display: none;
            border-color: transparent;
            &:after {
                border-color: transparent;
            }
        }
    }
}
::v-deep {
    .pbb__search-box {
        background: transparent !important;
    }
}
.import-dialog {
    .word {
        font-size: 14px;
        line-height: 22px;
        margin: 10px 0;
    }
}
</style>
<style lang="scss">
.town .page-base-body {
    height: calc(100% - 165px - 52px) !important;
}
.townAdmin .page-base-body {
    height: calc(100% - 165px - 52px) !important;
}
.opera .page-base-body {
    height: calc(100% - 110px - 52px) !important;
}
.regionalAdmin .page-base-body {
    height: calc(100% - 110px - 52px) !important;
}
.form-template-btn-tips {
    width: auto !important;
    min-width: unset !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    transform: translate(18px, 0) !important;
    z-index: 10;
    .btn-content-tips {
        font-family: "PingFang SC Medium";
        pointer-events: none;
        background: #fff;
        padding: 1px 7px;
        border: 1px solid #303133 !important;
        border-radius: 5px;
        font-size: 14px;
        line-height: 22px;
        color: #303133;
    }
}
</style>
